<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <el-button type="primary" @click="popAddUserDialog">主要按钮</el-button>
    <el-table
            :data="userData"
            border
            style="width: 100%">
        <el-table-column
                prop="uid"
                label="编号"
                width="50">
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="nikename"
                label="真实姓名">
        </el-table-column>
        <el-table-column
                prop="headname"
                label="头像">
            <template slot-scope="scope">
                <img :src="scope.row.headname" width="80" height="80">
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="" type="text" size="small">删除</el-button>
                <el-button type="text" size="small" @click="popRoleDialog(scope.row.uid)">分配角色</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="[1,3,5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--为用户分配角色-->
    <el-dialog
            title="分配角色"
            :visible.sync="dialogVisibleUser"
            width="30%"
            :before-close="handleClose">
        <el-checkbox-group v-model="userRole">
            <el-checkbox v-for="role in allRole" :label="role.rid+''" :key="role.rid+''">{{role.rname}}</el-checkbox>
        </el-checkbox-group>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleUser = false">取 消</el-button>
            <el-button type="primary" @click="modifyRole()">确 定</el-button>
          </span>
    </el-dialog>
<!--    用户田间的提示框-->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisibleAdd"
            width="30%"
            @close="clearMsg"
    >
        <el-form label-width="80px" :model="addMsg" ref="addFormRef">
            <!--上传图片的空间-->
            <el-upload
                    class="avatar-uploader"
                    action="/File/UpLoad"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-form-item label="用户账号" prop="username">
                <el-input v-model="addMsg.username"></el-input>
            </el-form-item>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
                <el-input v-model="addMsg.password"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nikename">
                <el-input v-model="addMsg.nikename"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAdd = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
    </el-dialog>
</div>


</body>
<script>
    new Vue({
        el: "#app",
        created() {
            this.initPage()
        },
        data: {
            //分页数据
            pageIndex: 1,
            pageSize: 5,
            //查询到的所有用户信息
            userData: [],
            //用户的查询条件
            userInfo: {},
            //当前呗修改的用户id
            userId: 0,
            //全部的角色
            allRole: [],
            //当前用户的角色
            userRole: [],
            //数据的条数
            total: 0,
            //控制弹窗的变量
            dialogVisibleUser: false,
            //呗添加的数据
            addMsg:{},
            //添加的提示框变量
            dialogVisibleAdd : false,
            //头像url
            imageUrl : '',

        },

        methods: {
            initPage() {
                axios.post(
                    "/User/GetUsers?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize
                    , this.userInfo
                ).then(resp => {
                    console.log(resp.data.data)
                    this.userData = resp.data.data.list
                    this.total = resp.data.data.total

                })
            },
            popRoleDialog(thisUid) {
                this.dialogVisibleUser = true
                this.userId = thisUid
                axios.post("/Role/UserRolesMsg?uid=" + thisUid).then(resp => {
                    this.userRole = []
                    this.allRole = []
                    console.log(resp.data.data)
                    this.allRole = resp.data.data.allRole
                    this.userRole = resp.data.data.userRole
                })
            },
            //当然在执行修改之前我们要吧当前这个用户的权限给他删掉，然后在将选中的权限给他加上去，所以我们要发两个请求
            // 删除当前用户的权限，以及插入当前用户的权限
            modifyRole() {
                axios.post("/Role/ModifyUserRole?uid=" + this.userId + "&roles=" + this.userRole).then(resp => {
                    console.log(resp)
                    this.dialogVisibleUser = false
                })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.initPage()
            },
            handleCurrentChange(val) {
                this.pageIndex = val
                this.initPage()

            },
            popAddUserDialog(){
                this.dialogVisibleAdd = true
            },
            addUser(){
                this.addMsg.headname=this.imageUrl
                axios.post("/User/AddUser",this.addMsg).then(resp=>{
                    this.initPage()
                    this.dialogVisibleAdd=false
                })
            }
        }

    })
</script>
</html>